<template>
  <div class="page f-d-c" :style="{ background: pageBg }">
    <!-- 头 -->
    <headerVue v-if="!hidehead && !meta.hideHeade"></headerVue>

    <!-- 内容 -->
    <div
      class="page-content"
      :class="{ padding0: padding0, hidewidths: meta.hidewidth }"
    >
      <router-view
        v-slot="{ Component }"
        style="height: 100%"
        v-if="isRouterActive"
      >
        <keep-alive style="height: 100%">
          <component
            style="height: 100%"
            :is="Component"
            :key="$route.name"
            v-if="$route.meta.keepAlive"
          />
        </keep-alive>
        <component
          :is="Component"
          :key="$route.name"
          v-if="!$route.meta.keepAlive"
        />
      </router-view>
    </div>

    <!-- 底部备案 -->
    <BottomPutOnRecords v-show="showBottom"></BottomPutOnRecords>
  </div>
</template>
<script>
import bottomVue from "@/components/bottom.vue";
import headerVue from "@/components/pageHeader.vue";
import BottomPutOnRecords from "@/components/BottomPutOnRecords.vue";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  watch,
  ref,
  getCurrentInstance,
  provide,
  onBeforeMount,
} from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { getLazyWidth } from "@/utils/common.js";
import bannerTopVue from "./components/bannerTop.vue";
export default defineComponent({
  components: {
    headerVue,
    bottomVue,
    BottomPutOnRecords,
    bannerTopVue,
  },
  setup() {
    let userInfo = computed(() => {
      return store.state.minUserInfo;
    });
    const { proxy } = getCurrentInstance();

    let store = useStore();
    let $router = useRouter();

    const isRouterActive = ref(true);
    let data = reactive({
      hideBannerTop: false, // 是否隐藏头部
      Fiexdtop: 60,
      pageBg: "#ffffff", //页面背景颜色
      hidehead: false,
      padding0: false,
      meta: {
        hideHeade: false,
        hideBottom: true,
        hidewidth: false,
      },
      // showBottom: true,
    });

    watch(
      () => $router.currentRoute.value.meta,
      (newVal, oldVal) => {
        data.meta.hideHeade = newVal.hideHeade;
        data.meta.hidewidth = newVal.hidewidth;
      }
    );
    provide("reload", () => {
      isRouterActive.value = false;
      proxy.$nextTick(() => {
        isRouterActive.value = true;
      });
    });
    watch(
      () => $router.currentRoute.value.name,
      (newVal, oldVal) => {
        if (
          newVal == "login" ||
          newVal == "mjTextToImg" ||
          newVal == "mjTopUp"
        ) {
          data.hidehead = true;
        } else {
          data.hidehead = false;
        }
        if (newVal == "/" || newVal == "Leaderboard") {
          data.hideBannerTop = false;
        } else {
          data.hideBannerTop = true;
        }
        if (
          newVal == "home" ||
          newVal == "mjTextToImg" ||
          newVal == "community" ||
          newVal == "contest_first" ||
          newVal == "hotcommunity" ||
          newVal == "pages/tags/tags" ||
          newVal == "Events" ||
          newVal == "mjTopUp"
        ) {
          data.padding0 = true;
        } else {
          data.padding0 = false;
        }

        // data.meta = newVal;
        // if (newVal.bg) {
        //   data.pageBg = newVal.bg;
        // } else {
        //   data.pageBg = "#ffffff";
        // }
        // console.log(newVal)
      }
    );

    let showBottom = computed(() => {
      return store.state.showBottom;
    });
    let accessToken = computed(() => {
      return store.state.accessToken;
    });
    let minToken = computed(() => {
      return store.state.minToken;
    });
    let mjToken = computed(() => {
      return store.state.mjToken;
    });
    // 修改瀑布流宽度
    let setLazyWidth = () => {
      let width = getLazyWidth();
      store.commit("setLazyWidth", width);
    };

    // window.addEventListener("beforeunload", (event) => {
    //   if (!event.persisted) {
    //     store.commit("setheadindex", 0);
    //   }
    // });

    // 如果是老域名 则跳转到新域名首页
    onBeforeMount(() => {});

    onMounted(() => {
      setLazyWidth();
      window.addEventListener("resize", function () {
        setLazyWidth();
      });

      if (!minToken.value) {
        $router.push("/");
        store.commit("outLogin");
      }
    });

    return {
      mjToken,
      minToken,
      isRouterActive,
      userInfo,
      accessToken,
      showBottom,
      ...toRefs(data),
    };
  },
});
</script>

<style lang="scss" scoped>
.padd {
  width: 100%;
  // background-color: #fff;
  // height: 120px;
  height: 154px;
}
.top {
  // position: fixed;
  // top: 0;
  // width: 100%;
}
.hidewidths {
  padding: 0 !important;
}

::v-deep .el-overlay {
  z-index: 20 !important;
}

.el-upload-list--picture-card {
  width: 80px !important;
  height: 80px !important;
}

.page {
  height: 100vh;
  // background: #F8F9FB;
}

.page-content {
  flex: 1;
  min-width: 1240px;
  overflow: hidden;
  // height: inherit;
  // height: 0;
  // padding-top: 40px;
  // padding-bottom: 30px;
  // overflow: hidden auto;
}

.padding0 {
  padding: 0;
}

.plus-icon-enter-active {
  transition: opacity 0.5s;
}

.plus-icon-enter {
  opacity: 0;
}

.plus-icon-leave-active {
  transition: opacity 0.5s;
}
</style>
